<template>
  <!-- 新增、修改入库单 -->
  <basic-container class="business-container page-warehous-entry-add-or-edit">
    <div class="wrap">
      <h4 class="title-box">
        <span class="title-text"> {{ title }} </span>
        <div class="right-btn-box">
          <el-button
            type="primary"
            v-if="type !== 'look'"
            @click="doAction('submit')"
            icon="position"
            >提交</el-button
          >
          <el-button type="default" v-if="['add', 'edit'].includes(type)" @click="doAction('save')"
            ><img src="~@/styles/img/submit.svg" class="self-icon" alt="icon-submit" />
            保存</el-button
          >
          <!-- <el-button type="default" @click="doAction('save')"
            ><img src="~@/styles/img/save.svg" class="self-icon" alt="icon-submit" />
            草稿</el-button
          > -->
          <el-button @click="doAction('cancel')" icon="circleClose">取消</el-button>
        </div>
      </h4>
      <div class="form-content">
        <el-form
          ref="formMainRef"
          :model="form"
          inline
          :disabled="disabled"
          label-width="100px"
          label-suffix=":"
          :rules="formRules"
        >
          <template v-for="group in formConfig">
            <div v-if="!group.showFunc || (group.showFunc && group.showFunc())" class="group">
              <div class="group-title">{{ group.label }}</div>
              <template v-if="group.type === 'formItemGroup'">
                <template v-for="item in group.children">
                  <el-form-item
                    v-if="!item.showFunc || item.showFunc(form)"
                    :label="item.label"
                    :prop="item.prop"
                    :class="item.class"
                  >
                    <el-select
                      v-if="item.type === 'el-select'"
                      v-bind="item.props"
                      v-model="form[item.prop]"
                      @change="
                        (...args) => {
                          handleFormItemChange(item, ...args);
                        }
                      "
                    >
                      <template v-if="dictCache[item.dictKey].value">
                        <el-option
                          v-for="(op, m) in dictCache[item.dictKey].value"
                          :key="m"
                          :label="item.labelKey ? op[item.labelKey] : op.dictValue"
                          :value="item.valueKey ? op[item.valueKey] : op.dictKey"
                        ></el-option>
                      </template>
                    </el-select>
                    <span v-else-if="item.type === 'text'">{{
                      [null, undefined, ''].includes(form[item.prop]) ? '-' : form[item.prop]
                    }}</span>
                    <component
                      v-else
                      v-bind="item.props"
                      :is="item.type"
                      v-model="form[item.prop]"
                      @change="
                        (...args) => {
                          handleFormItemChange(item, ...args);
                        }
                      "
                    >
                    </component>
                  </el-form-item>
                </template>
              </template>
              <template v-else-if="group.type === 'tableGroup'">
                <template v-for="(item, i) in group.children">
                  <!-- 操作 -->
                  <div v-if="item.type === 'actions'" class="actions">
                    <template v-for="(btn, k) in item.children">
                      <template v-if="!btn.showFunc || (btn.showFunc && btn.showFunc())">
                        <dc-select-dialog-v2
                          v-if="btn.type === 'dc-select-btn'"
                          v-bind="btn.selectProps.props"
                          @change="selectListChange"
                          :params="{
                            supplierId: form.supplierId,
                            sourceType: form.inType,
                          }"
                        >
                          <template #default>
                            <el-button
                              v-bind="btn.props"
                              :disabled="btn.disabled && btn.disabled()"
                            >
                              {{ btn.label }}
                            </el-button>
                          </template>
                        </dc-select-dialog-v2>
                        <dc-select-dialog-v2
                          v-else-if="btn.type === 'dc-select-btn2'"
                          v-bind="btn.selectProps.props"
                          @change="selectMultipleWarehouseChange"
                          :params="{
                            // supplierId: form.supplierId,
                            // sourceType: form.inType,
                          }"
                        >
                          <template #default>
                            <el-button
                              v-bind="btn.props"
                              :disabled="btn.disabled && btn.disabled()"
                            >
                              {{ btn.label }}
                            </el-button>
                          </template>
                        </dc-select-dialog-v2>
                        <dc-select-dialog-v2
                          v-else-if="btn.type === 'dc-select-btn3'"
                          v-bind="btn.selectProps.props"
                          :params="getWarehouseParam(detailList.selectData?.[0])"
                          @change="selectMultipleLocationIdChange"
                        >
                          <template #default>
                            <el-button
                              v-bind="btn.props"
                              :disabled="btn.disabled && btn.disabled()"
                            >
                              {{ btn.label }}
                            </el-button>
                          </template>
                        </dc-select-dialog-v2>
                        <el-button
                          v-else
                          v-bind="btn.props"
                          :disabled="btn.disabled()"
                          @click="doAction(btn.action, btn)"
                          >{{ btn.label }}</el-button
                        >
                      </template>
                    </template>
                  </div>
                  <!-- 表格数据 -->
                  <template v-else-if="item.type === 'table'">
                    <el-form-item style="width: 100%" :label-width="0" :prop="item.prop">
                      <el-table
                        v-bind="item.props"
                        ref="detailTable"
                        :data="form[item.prop]"
                        @selection-change="handleSelectionChange"
                      >
                        <el-table-column
                          v-for="(col, x) in item.children"
                          :key="x"
                          :width="col.width"
                          :fixed="col.fixed"
                          :type="col.type === 'rowText' ? '' : col.type"
                          :label="col.label"
                          :prop="col.prop"
                        >
                          <template v-if="col.type === 'rowText'" #default="scoped">
                            <el-form-item label-width="0" :rule="null" style="margin-right: 0">
                              <component
                                v-bind="col.props"
                                :max="
                                  col.formType === 'el-input-number' && scoped.row.max
                                    ? scoped.row.max
                                    : undefined
                                "
                                :min="col.formType === 'el-input-number' ? 0 : undefined"
                                :disabled="
                                  col.prop === 'locationId'
                                    ? getLocationDisableStatus(scoped.row)
                                    : col.props?.disabled
                                "
                                :placeholder="
                                  col.prop === 'locationId'
                                    ? getLocationDisableStatus(scoped.row) === true
                                      ? '仓位未启用'
                                      : col.props?.placeholder
                                    : col.props?.placeholder
                                "
                                :params="
                                  col.props?.params
                                    ? col.prop === 'locationId'
                                      ? getWarehouseParam(scoped.row)
                                      : col.props?.params
                                    : undefined
                                "
                                v-model="form.detailList[scoped.$index][col.prop]"
                                :is="col.formType"
                                @change="
                                  val => {
                                    handleDrawerFormItemChange(col, val, scoped.$index);
                                  }
                                "
                              ></component>
                            </el-form-item>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-form-item>
                  </template>
                </template>
              </template>
            </div>
          </template>
        </el-form>
      </div>
    </div>
  </basic-container>
</template>
<script setup>
import { computed, onMounted, reactive, ref, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getUserInfo } from '@/api/system/user';

import getTableColumn from './addOrEditConfig';
import api from '@/api';

const { proxy } = getCurrentInstance();
/** 是否全局禁用表单 */
const disabled = ref(false);
const formMainRef = ref(null);
const router = useRouter();
const params = ref({
  warehouseName: '',
});
const titleMaps = {
  add: '新增入库单',
  edit: '编辑入库单',
  look: '入库单详情',
  audit: '入库单审核',
};

const datas = reactive({
  detailList: {
    selectData: [],
    selectRows: [],
  },
});

const { detailList } = toRefs(datas);

const route = useRoute();

const { type, id } = route.query;

const detailTable = ref(null);

const title = computed({
  get() {
    return titleMaps[type];
  },
  set(value) {
    titleMaps[type] = value;
  },
});

const handleSelectionChange = (selectData, ...args) => {
  const selected = detailTable.value[0].getSelectionRows() || [];
  const indexes = selected.map(row => form.value.detailList.indexOf(row));
  detailList.value.selectData = selected;
  detailList.value.selectRows = indexes;
  // checkDisabled();
};

const getWarehouseParam = (row = {}) => {
  return {
    wareHouseId: row.warehouseId?.id ? row.warehouseId?.id : row.warehouseId,
    warehouseName: row.warehouseName,
  };
};

/** 控制是否可以选择仓位 */
const getLocationDisableStatus = row => {
  return row.warehouseName && row.enableLocation ? false : true;
};

const dictCache = proxy.useCache([{ key: 'DC_WMS_IN_TYPE_SCM' }, { key: 'SCMORG_LIST_CACHE' }]);

const pageData = reactive({
  form: {
    inType: '',
    detailList: [],
  },
});

const { form } = toRefs(pageData);

const formRules = computed(() => {
  const result = {
    detailList: [
      {
        required: false,
        trigger: ['blur', 'change'],
        validator: (_, value, callback) => {
          if (!(value && value.length > 0)) {
            callback(new Error('明细信息不能为空'));
            return;
          }
          const result = value.every(row => {
            // console.log('row.productName------------', row.productName);
            // console.log('row.productCode------------', row.productCode);
            // console.log('row.warehouseId------------', row.warehouseId);
            // console.log('row.enableLocation------------', row.enableLocation);
            // console.log('row.locationId------------', row.locationId);
            // console.log('row.productQty------------', row.productQty);
            return (
              row.productName &&
              row.productCode &&
              row.warehouseId &&
              ((row.enableLocation && row.locationId) ||
                (!row.enableLocation && !row.locationId)) &&
              row.productQty >= 0
            );
          });
          if (result) {
            if (value.find(row => row.productQty === 0)) {
              callback(new Error('物料入库数量必须大于0'));
            } else {
              callback();
            }
          } else {
            callback(new Error('请完成明细信息填写'));
          }
        },
      },
    ],
  };
  formConfig.value[0].children.forEach(item => {
    if (item.required) {
      result[item.prop] = [
        {
          required: true,
          trigger: ['blur', 'change'],
          validator(_, value, callback) {
            if ([null, '', undefined].includes(value)) {
              callback(new Error(item.props.placeholder));
            } else {
              callback();
            }
          },
        },
      ];
    }
  });

  return result;
});

// 表单配置
const formConfig = ref([
  {
    label: '基本信息',
    type: 'formItemGroup',
    children: [
      {
        type: 'el-select',
        label: '组织',
        prop: 'scmOrgId',
        required: true,
        class: 'w33',
        dictKey: 'SCMORG_LIST_CACHE',
        labelKey: 'label',
        valueKey: 'value',
        props: {
          filterable: true,
          placeholder: '请选择组织',
        },
      },
      {
        type: 'el-input',
        label: '入库单号',
        prop: 'inStockCode',
        class: 'w33',
        props: {
          disabled: true,
          class: 'system-auto-fill',
          placeholder: '系统自动生成',
        },
      },
      {
        type: 'el-select',
        label: '入库类型',
        required: true,
        prop: 'inType',
        dictKey: 'DC_WMS_IN_TYPE_SCM',
        class: 'w33',
        props: {
          placeholder: '请选择入库类型',
        },
      },
      {
        type: 'el-date-picker',
        label: '创建日期',
        prop: 'businessDate',
        class: 'w33',
        props: {
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          placeholder: '请选择日期',
        },
      },
      {
        type: 'dc-select-user',
        label: '仓管员',
        prop: 'processingPersonnel',
        class: 'w33',
        props: {
          disabled: true,
          objectName: 'user',
          suffixIcon: 'Search',
          placeholder: '系统自动填入',
        },
      },
      {
        type: 'dc-select-user',
        label: '采购员',
        prop: 'prUserId',
        class: 'w33',
        props: {
          objectName: 'user',
          suffixIcon: 'Search',
          placeholder: '请选择采购员',
        },
      },
      {
        type: 'dc-select-dialog',
        label: '供应商',
        prop: 'supplierId',
        required: true,
        class: 'w33',
        props: {
          type: 'input',
          params: { flagStatusDict: 1 },
          multiple: false,
          'multiple-limit': 1,
          clearable: true,
          returnType: 'string',
          objectName: 'scmSupplier',
          placeholder: '请选择供应商',
        },
      },
    ],
  },
  {
    label: '明细信息',
    type: 'tableGroup',
    children: [
      {
        type: 'actions',
        children: [
          {
            showFunc() {
              return ['add', 'edit'].includes(type) && form.value.inType !== 'DC_WMS_IN_TYPE_CGRK';
            },
            label: '新增',
            action: 'addrow',
            disabled() {
              return false;
            },
            // disabled() {
            //   return [null, undefined, ''].includes(form.value.inType);
            // },
            props: {
              title: '请先选择入库类型',
              plain: true,
              type: 'primary',
            },
          },
          {
            showFunc() {
              return ['add', 'edit'].includes(type) && form.value.inType === 'DC_WMS_IN_TYPE_CGRK';
            },
            label: '获取采购明细',
            action: 'getInSockDetail',
            type: 'dc-select-btn',
            disabled() {
              return (
                [null, undefined, ''].includes(form.value.inType) ||
                [null, undefined, ''].includes(form.value.supplierId)
              );
            },
            props: {
              plain: true,
              title: '请先选择供应商',
              style: {
                'margin-right': '10px',
              },
              type: 'primary',
            },
            selectProps: {
              type: 'dc-select-btn',
              label: '供应商物料清单',
              prop: 'supplierId',
              required: true,
              class: 'w33',
              props: {
                type: 'input',
                multiple: true,
                clearable: true,
                multipleLimit: 10,
                objectName: 'scmInStockDetailList',
                rowKey: 'mtoNo',
                placeholder: '请选择物料清单',
              },
            },
          },
          {
            label: '删除',
            action: 'delrow',
            showFunc() {
              return ['add', 'edit'].includes(type);
            },
            disabled() {
              return !(detailList.value.selectRows.length > 0);
            },
            props: {
              plain: true,
            },
          },
          {
            label: '复制行',
            action: 'copyrow',
            showFunc() {
              return ['add', 'edit'].includes(type) && form.value.inType !== 'DC_WMS_IN_TYPE_CGRK';
            },
            disabled() {
              return !(detailList.value.selectRows.length > 0);
            },
            props: {
              plain: true,
            },
          },
          {
            label: '批量选择仓库',
            action: 'multipleInsetWarehouseId',
            type: 'dc-select-btn2',
            showFunc() {
              return ['add', 'edit'].includes(type);
            },
            disabled() {
              const rows = detailList.value.selectData;
              return !(rows.length > 1);
            },
            props: {
              style: {
                margin: '0 8px',
              },
              plain: true,
            },
            selectProps: {
              type: 'dc-select-btn',
              label: '供应商物料清单',
              prop: 'supplierId',
              required: true,
              class: 'w33',
              props: {
                objectName: 'warehouse',
                type: 'input',
                suffixIcon: 'Search',
                multiple: false,
                multipleLimit: 1,
                clearable: true,
                params: {
                  // siteWarehouse: true,
                },
                placeholder: '请点击选择仓库',
              },
            },
          },
          {
            label: '批量选择库位',
            action: 'multipleInsetWarehouseId',
            type: 'dc-select-btn3',
            showFunc() {
              return ['add', 'edit'].includes(type);
            },
            disabled() {
              const rows = detailList.value.selectData;
              if (rows.length > 1) {
                const tag = rows[0].warehouseId;
                if (tag && rows.every(r => r.warehouseId === tag)) {
                  return false;
                }
              }
              return true;
            },
            props: {
              plain: true,
            },
            selectProps: {
              prop: 'locationId',
              label: '仓位(*)',
              type: 'rowText',
              formType: 'dc-select-dialog',
              required: true,
              props: {
                objectName: 'warehouseLocation',
                type: 'input',
                suffixIcon: 'Search',
                multiple: false,
                multipleLimit: 1,
                clearable: true,
                params: {
                  warehouseName: '',
                },
                placeholder: '请点击选择库位',
              },
            },
          },
        ],
      },
      {
        type: 'table',
        props: {
          border: true,
        },
        prop: 'detailList',
        children: getTableColumn(form.value.inType),
      },
    ],
  },
  {
    label: '基础信息',
    type: 'formItemGroup',
    showFunc() {
      return type !== 'add';
    },
    children: [
      {
        label: '创建人',
        prop: 'createUser',
        class: 'w25',
        type: 'dc-view',
        props: {
          objectName: 'user',
        },
      },
      {
        label: '创建时间',
        prop: 'createTime',
        class: 'w25',
        type: 'text',
      },
      {
        label: '审核人',
        prop: 'auditUserId',
        class: 'w25',
        type: 'dc-view',
        props: {
          objectName: 'user',
        },
      },
      {
        label: '审核时间',
        prop: 'auditTime',
        class: 'w25',
        type: 'text',
      },
    ],
  },
]);

/** 获取详情数据 */
const getDetail = async () => {
  const res = await api.scm.wareHouse.getDetail({
    id,
  });
  if (res.data.code === 200) {
    form.value = res.data.data;
    formConfig.value[1].children[1].children = getTableColumn(form.value.inType);
  }
};

const saveData = () => {
  const submitData = JSON.parse(
    JSON.stringify({
      ...form.value,
    })
  );
  submitData.detailList = submitData.detailList.map(row => {
    return {
      ...row,
      wareHouseId: row.warehouseId?.id ? row.warehouseId?.id : row.warehouseId,
    };
  });
  formMainRef.value.validate(valid => {
    if (valid) {
      api.scm.wareHouse.submit(submitData).then(res => {
        if (res.data.code === 200) {
          router.go(-1);
          // router.push({
          //   path: '/scm/inventoryMng/warehouseEntry/index',
          // });
        }
      });
    }
  });
};

/** 审核 */
const submitData = () => {
  formMainRef.value.validate(valid => {
    if (valid) {
      api.scm.wareHouse
        .wareHouseAudit({
          ...form.value,
        })
        .then(res => {
          if (res.data.code === 200) {
            router.go(-1);
            // router.push({
            //   path: '/scm/inventoryMng/warehouseEntry/index',
            // });
          }
        });
    }
  });
};

const showInSockDetailModal = (btn, scoped) => {
  console.log('btn, scoped', btn, scoped);
  scoped.bindObj.openDialog();
};

/** 执行相关操作 */
const doAction = (action, ...args) => {
  switch (action) {
    case 'addrow':
      if ([null, undefined, ''].includes(form.value.inType)) {
        proxy.$message.error('请先选择基本信息的入库类型');
        formMainRef.value.validateField(['inType']);
        return;
      }
      const newRow = {
        productId: '',
        productName: '',
        productCode: '',
        productSpec: '',
        brand: '',
        warehouseId: '',
        warehouseName: '',
        productUnit: '',
        locationId: '',
        productQty: 1,
        sourceSeq: '',
      };
      form.value.detailList.push(newRow);
      // openDrawer();
      break;
    case 'delrow':
      form.value.detailList = form.value.detailList.filter((_, index) => {
        return !detailList.value.selectRows.includes(index);
      });
      break;
    case 'copyrow':
      const copyData = JSON.parse(JSON.stringify(detailList.value.selectData));
      copyData.forEach(row => {
        form.value.detailList.push(row);
      });
      break;
    case 'getInSockDetail':
      showInSockDetailModal(...args);
      break;

    case 'save':
      saveData();
      break;
    case 'submit':
      submitData();
      break;
    case 'cancel':
      router.go(-1);
      // router.push({
      //   path: '/scm/inventoryMng/warehouseEntry/index',
      // });
      break;

    default:
      console.log('action not done', action);
  }
};

/**
 * 数据改变
 * @param val
 */
const selectListChange = val => {
  form.value.detailList = JSON.parse(
    JSON.stringify(
      val.map(row => {
        return {
          ...row,
          max: row.productQty,
        };
      })
    )
  );
};

/** 仓库批量改变 */
const selectMultipleWarehouseChange = value => {
  // const detailListSet = JSON.parse(JSON.stringify(form.value.detailList));
  detailList.value.selectRows.forEach($index => {
    form.value.detailList[$index].warehouseId = value.id;
    form.value.detailList[$index].enableLocation = value.enableLocation;
    form.value.detailList[$index].warehouseName = value.warehouseName;
    form.value.detailList[$index].locationId = '';
  });
  // form.value.detailList = detailListSet;
};

/** 批量库位选择 */
const selectMultipleLocationIdChange = value => {
  detailList.value.selectRows.forEach($index => {
    form.value.detailList[$index].locationId = value.id;
  });
};

/**
 * 基本信息变更回调
 * @param item
 * @param args
 */
const handleFormItemChange = (item, ...args) => {
  if (item.prop === 'inType') {
    formConfig.value[1].children[1].children = getTableColumn(args[0]);
    form.value.detailList = [];
  } else if (item.prop === 'supplierId') {
    form.value.supplierId = args[0].id;
  }
};

// 选择物料后自动填入
const selectMapFilter = {
  productId: 'id',
  productName: 'materialName',
  productCode: 'materialNumber',
  productSpec: 'specification',
  brand: 'brand',
  productQty: '',
  productUnit: 'unitDict',
  locationId: '',
  sourceSeq: '',
};
/**
 * 物料信息变更
 * @param item
 * @param value
 */
const handleDrawerFormItemChange = (item, value, $index) => {
  if (item.prop === 'productId') {
    Object.keys(selectMapFilter).forEach(k => {
      if (selectMapFilter[k]?.length > 0) {
        form.value.detailList[$index][k] =
          value && value[selectMapFilter[k]] ? value[selectMapFilter[k]] : '';
      }
    });
  } else if (item.prop === 'warehouseId') {
    form.value.detailList[$index].warehouseId = value.id;
    form.value.detailList[$index].enableLocation = value.enableLocation;
    form.value.detailList[$index].warehouseName = value.warehouseName;
    form.value.detailList[$index].locationId = '';
  } else if (item.prop === 'locationId') {
    form.value.detailList[$index].locationId = value.id;
    // form.value.detailList[$index].locationId = value.id;
  }
  // console.log('item', item, 'value', value);
};

/** 自动填入 */
const getUserInfoData = () => {
  getUserInfo().then(res => {
    // 自动填入当前用户
    if (res.data.code === 200) {
      form.value.processingPersonnel = res.data.data.id;
    }
  });
};

onMounted(async () => {
  if (['add'].includes(type)) {
    await getUserInfoData();
  } else if (['edit', 'audit', 'look'].includes(type)) {
    disabled.value = type === 'edit' ? false : true;
    await getDetail();
  }
});
</script>
<style lang="scss" scoped>
.page-warehous-entry-add-or-edit {
  .title-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    line-height: 48px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    height: 60px;
    border-bottom: 2px solid #dadbe0;
  }

  .self-icon {
    display: inline-block;
    margin-right: 4px;
    transform: translateY(-1px);
  }

  :deep(.el-input) {
    display: block;
    width: 100%;
    .el-input__wrapper {
      width: 100%;
    }
  }

  :deep(.el-table__empty-text) {
    width: 100%;
    text-align: center;
    line-height: 200px;
    height: 200px;
    border-bottom: 1px solid rgb(229, 231, 235);
  }

  :deep(.el-table) {
    .el-input-number {
      width: calc(100% - 16px);
    }
  }

  .group-title {
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding-left: 9px;
    position: relative;
    padding-top: 20px;
    padding-bottom: 32px;

    &::before {
      display: inline-block;
      content: ' ';
      width: 4px;
      height: 13px;
      background: #f78431;
      margin-right: 8px;
    }
  }

  .actions {
    padding-bottom: 12px;
  }
  .w33 {
    width: 30%;
    margin-right: 3%;
  }
  .w25 {
    width: 23%;
    margin-right: 2%;
  }
}
</style>
